<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>登录首页</title>
    <!-- 导入基础样式 -->
    <link rel="stylesheet" href="../css/base.css">
    <!-- 导入登录页面的样式 -->
    <link rel="stylesheet" href="../css/login.css">
    <!-- 导入轮播图的js -->
    <script src="../js/focus.js"></script>
    <!-- 导入animate.js -->
    <script src="../js/animate.js"></script>
    <!-- 导入时间的js -->
    <script src="../js/time.js"></script>
    <!-- 导入登录的js -->
    <script src="../js/login.js"></script>

    <!-- 必须先引入jquery的js -->
    <script type="text/javascript" src="../js/jquery.min.js"></script>

</head>

<body>
<div class="container">
    <!-- 顶部导航栏 -->
    <header class="header">
        <img src="../images/daohangtaio.png" width="120" height="50" alt="">
        <div class="logo">
        </div>

        <h2 class="brand">携人旅行可视化管理平台</h2>
        <div class="time">
            <h6 class="date"></h6>
            <h6 class="second"></h6>
        </div>
    </header>

    <!-- 主体内容 -->
    <main>
        <!-- 左侧轮播图 -->
        <div class="left">
            <div class="left_container">
                <div class="focus">
                    <!-- 左侧按钮 -->
                    <a href="javascript:;" class="arrow-l"></a>
                    <!-- 右侧按钮 -->
                    <a href="javascript:;" class="arrow-r"></a>
                    <!-- 轮播图的图片 -->
                    <ul>
                        <li><img src="../images/aa.jpg" alt=""></li>
                        <li><img src="../images/bb.jpg" alt=""></li>
                        <li><img src="../images/uu.jpg" alt=""></li>
                    </ul>
                    <!-- 小圆点 -->
                    <ol class="circle">
                    </ol>
                </div>
            </div>
        </div>

        <!-- 右侧登陆界面 -->
        <div class="right">
            <form id="loginFrom" method="post" class="login_container">
                <!-- 登录方式 -->
                <div class="login_method" align="center">
                    <span><a href="javascript:;" class="account_a">账号登录</a></span>
                </div>

                <!-- 分割线 -->
                <div class="hline"></div>

                <!-- 输入框 用来占位 -->
                <div class="input_box"></div>

                <!-- 修改密码 -->
                <a href="change_pwd.html" class="forget_pwd">修改密码</a>

                <!-- 登录按钮 -->
                <input type="button" class="click_login" value="登录" onclick="login()"/>

                <!-- 未注册 -->
                <a href="register.html" class="to_register">未注册，先去注册</a>
            </form>

            <!-- 其他登录方式 -->
            <div class="other_methods">
                <div class="ways">其他登录方式</div>
                <a href="javascript:;" class="icon qq"></a>
                <a href="javascript:;" class="icon wechat"></a>
            </div>

            <!-- 作者 -->
            <h3 class="author">-Directed By sanZu-</h3>
        </div>
    </main>
</div>
</body>

<script>
    //登录
    function login(){

        $.ajax({
            url:'/hotel/login',
            type:"post",
            data:$("#loginFrom").serialize(),
            dataType:"text",//规定ajax返回值类型 把后台json字符串转换为js的json对象
            success:function(data){
                if(data == "登录成功"){
                    window.location.href = 'http://localhost:8089/index.html';
                }else{
                    bootbox.alert({
                        size: "small",
                        title: "提示",
                        message: data});
                }
            },
        })
    }

</script>
</html>